<template>
  <div id="three" class="container">
    <!-- <div class="text-dom">原点</div> -->
  </div>
</template>

<script setup>
import * as THREE from "three";
import { onMounted } from "vue";

onMounted(() => {
  // 渲染器
  const renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  const container = document.getElementById("three");
  container.appendChild(renderer.domElement);
  // 相机
  const camera = new THREE.PerspectiveCamera(
    45,
    window.innerWidth / window.innerHeight,
    1,
    500
  );
  camera.position.set(0, 0, 100);
  camera.lookAt(0, 0, 0);
  // 场景
  const scene = new THREE.Scene();
  // 线段材质
  const material = new THREE.LineBasicMaterial({ color: 0xffffcc });
  // 几何体
  const points = [];
  points.push(new THREE.Vector3(0, 0, 0));
  points.push(new THREE.Vector3(-10, 0, 0));
  points.push(new THREE.Vector3(0, 10, 0));
  points.push(new THREE.Vector3(10, 0, 0));
  points.push(new THREE.Vector3(0, -10, 0));
  points.push(new THREE.Vector3(-10, -10, 0));
  const geometry = new THREE.BufferGeometry().setFromPoints(points);
  // 点和材质结合成线
  const line = new THREE.Line(geometry, material);
  // 添加到场景中并渲染
  scene.add(line);
  renderer.render(scene, camera);
});
</script>

<style lang="less" scoped>
.container {
  .text-dom {
    position: absolute;
    z-index: 100;
    color: white;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
</style>
